<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div>
          <img
            :src="reactiveImgArray[selectedIndex][cur_imgIndex]"
            style="width: 100%; height: 361px"
          />
          <el-row style="padding: 10px 0px" :gutter="24">
            <el-col
              :span="6"
              v-for="(imgItem, imgIndex) in reactiveImgArray[selectedIndex]"
              :key="imgIndex"
            >
              <img
                :src="imgItem"
                style="width: 100%"
                @click="imgClick(imgIndex)"
              />
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div
          class="u-flex u-col-top"
          v-for="(item, index) in reactiveTitleArray"
          :key="index"
        >
          <div
            style="
              width: 15%;
              align-self: stretch;
              display: flex;
              align-items: center;
            "
            class="u-flex-col"
          >
            <el-image
              :src="
                selectedIndex == index
                  ? 'https://static2.ichunqiu.com/icq/resources/images/racing/broadcast/ping_tai_jie_shao_1.png'
                  : 'https://static2.ichunqiu.com/icq/resources/images/racing/broadcast/ping_tai_jie_shao_2.png'
              "
              fit="fill"
              style="width: 44px; height: 44px"
            />
            <div
              v-if="index != reactiveTitleArray.length - 1"
              style="
                flex: 1;
                background-color: transparent;
                width: 1px;
                height: 100%;
                border-left: dashed 1px #a8abb2;
                margin: -10px 0px;
              "
            ></div>
          </div>
          <div
            style="width: 85%; min-height: 75px"
            class="u-flex-col u-col-top"
          >
            <el-button
              text
              style="font-size: 18px; font-weight: bold"
              @click="titleClick(index)"
            >
              {{ item.productName }}
            </el-button>
            <div v-if="selectedIndex == index" class="timelineContentBox">
              {{ item.productOutline }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- <button @click="count++">You clicked me {{ count }} times.</button> -->
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";

const props = defineProps({
  dataList: Array,
});
console.log(props.dataList);

const dataList: any[] = props.dataList;
let imgArray = [];
let titleArray = [];
dataList.forEach((item) => {
  console.log(item);
  imgArray.push([
    item.pictureOne,
    item.pictureTow,
    item.pictureThree,
    item.pictureFour,
  ]);
  titleArray.push({
    productName: item.productName,
    productOutline: item.productOutline,
  });
});

let reactiveImgArray = reactive([]);
let reactiveTitleArray = reactive([]);
Object.assign(reactiveImgArray, imgArray);
Object.assign(reactiveTitleArray, titleArray);

const cur_imgIndex = ref(0);
const selectedIndex = ref(0);
const activities = [
  {
    title: "AWD比赛平台",
    content:
      "覆盖Web渗透、二进制漏洞挖掘利用、密码分析、取证分析、逆向分析、安全编程等网络安全各项技术，解题过程需通过离线分析或在线交互克服技术挑战后获取Flag，提交验证正确后给予相应分数。主要考察参赛人员理论知识和专项攻防技术的掌握程度，参赛人员通过解题提交答案得分。",
  },
  {
    title: "AWD比赛平台",
    content: "Custom icon",
  },
  {
    title: "AWD比赛平台",
    content: "Custom icon",
  },
  {
    title: "AWD比赛平台",
    content: "Custom icon",
  },
];
function titleClick(index: number) {
  selectedIndex.value = index;
}

function imgClick(imgIndex: number) {
  console.log("图片点击", imgIndex);
  cur_imgIndex.value = imgIndex;
}
</script>
<style scoped>
.timelineContentBox {
  overflow: visible;
  height: auto;

  border-radius: 10px;
  color: #808090;
  background-color: #fff;
  border: 1px solid #ededed;
  font-size: 0.5em;
  line-height: 22px;
  padding: 10px;
  margin: 10px;
}
.selectedStaues {
  margin-bottom: -20px;
}
</style>
